<template>
  <div>
    <!-- 雷达 -->
    <div id="test" class="radar"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('test'))
    // 绘制图表
    myChart.setOption({
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '逻辑思维', max: 100 },
          { name: '项目相关', max: 100 },
          { name: '基础知识', max: 100 },
          { name: '理论知识', max: 100 },
          { name: '高阶技术', max: 100 }
        ],
        radius: 55, // 缩放
        center: ['50%', '50%'],
        // 雷达图背景的颜色
        splitArea: {
          show: true,
          areaStyle: {
            color: '#c9c0cb',
            opacity: 1 // 图表背景的颜色
          }
        }
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          symbol: 'none', // 去掉图表中各个图区域的边框线拐点
          itemStyle: {
            normal: {
              color: '#2ec7c9',
              // 图表中各个图区域的边框线拐点颜色
              areaStyle: {
                normal: {
                  color: '#2ec7c9'
                },
                type: 'default',
                opacity: 1
              }
            }
          },
          data: [
            {
              value: [80, 86, 58, 50, 78]
            }
          ]
        }
      ]
    })
  },
  created() {},
  methods: {}
}
</script>
<style scoped>
.radar {
  /* position: relative;
  top: 10px;
  left: 20px; */
  width: 220px;
  height: 220px;
}
</style>
